<template>
  <el-dialog
    class="step-model"
    append-to-body
    title="当前步骤"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :before-close="handleCancel">
    <div class="step-container">
      <el-steps
        :space="$setRem(200)"
        :active="active"
        finish-status="success"
        align-center>
        <el-step
          v-for="(item, index) in stepList"
          :title="item.title"
          :description="active === index ? '进行中' : ''"
          :key="index">
        </el-step>
      </el-steps>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    // 步骤列表
    stepList() {
      return this.options && this.options.steps || [];
    },
    // 当前步骤
    active() {
      const { currentStep, totalStep } = this.options;
      return currentStep === totalStep ? currentStep : currentStep - 1;
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .step-model {
    min-width: 400px;
    .step-container {
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/ .el-steps {
        width: 100%;
        display: flex;
        justify-content: center;
        .el-step__title.is-process {
          color: #000;
        }
        .el-step__description.is-process {
          color: $disabledBg;
        }
      }
    }
  }
</style>
